import { useState } from 'react';
import styles from './index.module.css';
import Welcome from './Welcome';
import WelcomeHook from './WelcomeHook';
import WelcomeHookSplit from './WelcomeHookSplit';
import WelcomeHookClass from './WelcomeHookClass';

const tabItems = [
    { key: 'welcome', label: 'Welcome', component: Welcome },
    { key: 'welcomeHook', label: 'WelcomeHook', component: WelcomeHook },
    { key: 'welcomeHookSplit', label: 'WelcomeHookSplit', component: WelcomeHookSplit },
    { key: 'welcomeHookClass', label: 'WelcomeHookClass', component: WelcomeHookClass },
  ]
export default function CustomHookAnimation() {
  const [show, setShow] = useState(false);
  const [activeTab, setActiveTab] = useState(tabItems[0]);
  return (
    <div className={styles.container}>
      <h1>Custom Hook Animation</h1>
      <div className={styles.tab}>
        {tabItems.map(item => (
          <div
            key={item.key}
            className={styles.tabItem}
            style={{ color: activeTab?.key === item?.key ? 'red' : 'black' }}
            onClick={() => {
              setActiveTab(item);
              setShow(false); // 切换标签时隐藏内容
            }}
          >
            {item.label}
          </div>
        ))}
      </div>  
      <button onClick={() => setShow(!show)}>
        {show ? 'Remove' : 'Show'}
      </button>
      <hr />
      {show && <activeTab.component />}
    </div>
  );
}
